<div class="Layer cover groupLayer" ng-show="showGroupLayer">
  <div class="layerBody">
    <div class="controlTitle textTitle">兴趣人群</div>
    <div class="closeLayer" ng-click="ifShowGroupLayer()"><i class="iconfont bigSize">&#xe608;</i></div>
    <!-- <div class="selectContain">
      <select name="platName" id="">
        <option value="1">pc人群</option>
        <option value="2">运动达人</option>
      </select>
    </div> -->
    <div class="remind">*可勾选不同的标签圈定特定的人群</div>
    <div class="main clear">
      <div class="leftPart fl">
        <div class="" ng-repeat="list in dataList">
          <div class="title clear"><span class="fl cursor addIcon" ng-show="!list.ifShowChildren && list.region_type==='0'" ng-click="showChildren(list)"></span><span class="fl cursor reduceIcon" ng-show="list.ifShowChildren && list.region_type==='0'" ng-click="showChildren(list)"></span>{{list.text}}<span class="fr chooseBox Chosed" ng-show="list.ifChosed && list.enable==='Y'" ng-click="chooseAction(list)"></span><span class="fr chooseBox noChosed" ng-show="!list.ifChosed && list.enable==='Y'" ng-click="chooseAction(list)"></span></div>
          <div class="first" ng-show="list.ifShowChildren" ng-repeat="list1 in list.childrenList">
            <div class="title clear"><span class="fl cursor addIcon" ng-show="!list1.ifShowChildren && list1.region_type==='0'" ng-click="showChildren(list1)"></span><span class="fl cursor reduceIcon" ng-show="list1.ifShowChildren && list1.region_type==='0'" ng-click="showChildren(list1)"></span>{{list1.text}}<span class="fr chooseBox Chosed" ng-show="list1.ifChosed && list1.enable==='Y'" ng-click="chooseAction(list1,list)"></span><span class="fr chooseBox noChosed" ng-show="!list1.ifChosed && list1.enable==='Y'" ng-click="chooseAction(list1,list)"></span></div>
            <div class="second" ng-show="list1.ifShowChildren" ng-repeat="list2 in list1.childrenList">
              <div class="title clear"><span class="fl cursor addIcon" ng-show="!list2.ifShowChildren && list2.region_type==='0'" ng-click="showChildren(list2)"></span><span class="fl cursor reduceIcon" ng-show="list2.ifShowChildren && list2.region_type==='0'" ng-click="showChildren(list2)"></span>{{list2.text}}<span class="fr chooseBox Chosed" ng-show="list2.ifChosed && list2.enable==='Y'" ng-click="chooseAction(list2,list1,list)"></span><span class="fr chooseBox noChosed" ng-show="!list2.ifChosed && list2.enable==='Y'" ng-click="chooseAction(list2,list1,list)"></span></div>
              <div class="three" ng-show="list2.ifShowChildren" ng-repeat="list3 in list2.childrenList">
                <div class="title clear"><span class="fl cursor addIcon" ng-show="!list3.ifShowChildren && list3.region_type==='0'" ng-click="showChildren(list3)"></span><span class="fl cursor reduceIcon" ng-show="list3.ifShowChildren && list3.region_type==='0'" ng-click="showChildren(list3)"></span>{{list3.text}}<span class="fr chooseBox Chosed" ng-show="list3.ifChosed && list3.enable==='Y'" ng-click="chooseAction(list3,list2,list1,list)"></span><span class="fr chooseBox noChosed" ng-show="!list3.ifChosed && list3.enable==='Y'" ng-click="chooseAction(list3,list2,list1,list)"></span></div>
                <div class="four" ng-show="list3.ifShowChildren" ng-repeat="list4 in list3.childrenList">
                  <div class="title clear"><span class="fl cursor addIcon" ng-show="!list4.ifShowChildren && list4.region_type==='0'" ng-click="showChildren(list4)"></span><span class="fl cursor reduceIcon" ng-show="list4.ifShowChildren && list4.region_type==='0'" ng-click="showChildren(list4)"></span>{{list4.text}}<span class="fr chooseBox Chosed" ng-show="list4.ifChosed && list4.enable==='Y'" ng-click="chooseAction(list4,list3,list2,list1,list)"></span><span class="fr chooseBox noChosed" ng-show="!list4.ifChosed && list4.enable==='Y'" ng-click="chooseAction(list4,list3,list2,list1,list)"></span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="" ng-repeat="list0 in lists0">
          <div class="title clear"><span class="fl cursor addIcon" ng-show="!list0.ifShowChildren && list0.region_type==='0'" ng-click="showChildren(list0)"></span><span class="fl cursor reduceIcon" ng-show="list0.ifShowChildren && list0.region_type==='0'" ng-click="showChildren(list0)"></span>{{list0.name}}<span class="fr chooseBox Chosed" ng-show="list0.ifChosed && list0.enable===true" ng-click="chooseAction(list0)"></span><span class="fr chooseBox noChosed" ng-show="!list0.ifChosed && list0.enable===true" ng-click="chooseAction(list0)"></span></div>
          <div class="first" ng-show="list0.ifShowChildren" ng-repeat="list1 in lists1">
            <div class="title clear"><span class="fl cursor addIcon" ng-show="!list1.ifShowChildren && list1.region_type==='0'" ng-click="showChildren(list1)"></span><span class="fl cursor reduceIcon" ng-show="list1.ifShowChildren && list1.region_type==='0'" ng-click="showChildren(list1)"></span>{{list1.name}}<span class="fr chooseBox Chosed" ng-show="list1.ifChosed && list1.enable===true" ng-click="chooseAction(list1)"></span><span class="fr chooseBox noChosed" ng-show="!list1.ifChosed && list1.enable===true" ng-click="chooseAction(list1)"></span></div>
            <div class="second" ng-show="list1.ifShowChildren" ng-repeat="list2 in lists2 | filter:list1.id">
              <div class="title clear"><span class="fl cursor addIcon" ng-show="!list2.ifShowChildren && list2.region_type==='0'" ng-click="showChildren(list2)"></span><span class="fl cursor reduceIcon" ng-show="list2.ifShowChildren && list2.region_type==='0'" ng-click="showChildren(list2)"></span>{{list2.name}}<span class="fr chooseBox Chosed" ng-show="list2.ifChosed && list2.enable===true" ng-click="chooseAction(list2,list1)"></span><span class="fr chooseBox noChosed" ng-show="!list2.ifChosed && list2.enable===true" ng-click="chooseAction(list2,list1)"></span></div>
              <div class="three" ng-show="list2.ifShowChildren" ng-repeat="list3 in lists3 | filter:list2.id">
                <div class="title clear"><span class="fl cursor addIcon" ng-show="!list3.ifShowChildren && list3.region_type==='0'" ng-click="showChildren(list3)"></span><span class="fl cursor reduceIcon" ng-show="list3.ifShowChildren && list3.region_type==='0'" ng-click="showChildren(list3)"></span>{{list3.name}}<span class="fr chooseBox Chosed" ng-show="list3.ifChosed && list3.enable===true" ng-click="chooseAction(list3,list1)"></span><span class="fr chooseBox noChosed" ng-show="!list3.ifChosed && list3.enable===true" ng-click="chooseAction(list3,list1)"></span></div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="rightPart fl">
        <div class="clear"><span class="fr clearBtn cursor" ng-click="clearAll()">清空</span></div>
        <div class="showResult" ng-show="value.length!==0" ng-repeat="(key,value) in chosedData">
          <div class="controlTitle textTitle">{{key}}</div>
          <div ng-repeat="item in value">
            <div class="clear"><span class="fl">{{item.text}}</span></div>
            <div class="clear" ng-show="$index!==(value.length-1)"><span class="fr">or</span></div>
          </div>
        </div>
        <!-- <div class="showResult">
          <div class="controlTitle textTitle">所在地区</div>
          <div class="clear"><span class="fl">上海</span></div>
          <div class="clear"><span class="fr">or</span></div>
          <div class="clear"><span class="fl">北京</span></div>
        </div>
        <div class="showResult">
          <div class="controlTitle textTitle">性别</div>
          <div class="clear"><span class="fl">男士</span></div>
          <div class="clear"><span class="fr">or</span></div>
          <div class="clear"><span class="fl">女士</span></div>
          <div class="clear"><span class="fr">or</span></div>
          <div class="clear"><span class="fl">未知</span></div>
        </div> -->
      </div>
      <div class="bottomPart fl">
        <!-- <div class="chosedGather clear" ng-repeat="data in chosedList"><span class="fl">（男士or女士）and（8000-15000or15000-30000）and（女性护理or男性护理）and（金融or互wangwang联网）</span><span class="fr closeBtn"></span></div> -->
        <div class="chosedGather clear" ng-repeat="data in showChosedList">
          <span class="fl" title="{{data}}">{{data}}</span><span class="fr closeBtn" ng-click="deleteThis(data,$index)"></span>
        </div>
        <!-- <div class="chosedGather clear" ng-repeat="data in chosedList">
          <span class="fl"><span title="" ng-repeat="item in data">（{{item.allName}}）<span ng-show="$index!==(data.length-1)">and</span></span></span><span class="fr closeBtn" ng-click="deleteThis(data)"></span>
        </div> -->
      </div>
    </div>
    <!--<div class="button btns">-->
      <!--<button class="btn btn-radius btn-lg btn-warning back" >取消</button>-->
      <!--<button class="btn btn-radius btn-lg btn-warning" >确认</button>-->
    <!--</div>-->
    <div class="btnContainer">
      <button ng-click="ifShowGroupLayer()">取消</button>
      <button ng-click="sureEvent()">确定</button>
    </div>
  </div>
</div>
<style>
  .chooseBox.Chosed{
    width:20px;
    height:20px;
    background-image: url(../../../../../../iFengChao-UI/lib/img/checkbox.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 18px;
    cursor: pointer;
  }
  .chooseBox.noChosed{
    width:20px;
    height:20px;
    background-image: url(../../../../../../iFengChao-UI/lib/img/checkbox.png);
    background-repeat: no-repeat;
    background-position: 0px -26px;
    background-size: 18px;
    cursor: pointer;
  }
  .Layer .layerBody{
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 30px 30px 60px 30px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
  }
  .Layer .layerBody .textTitle{
    margin-top: 0px;
  }
  .Layer .closeLayer{
    width:20px;
    height:28px;
    position:absolute;
    right:30px;
    top:30px;
    cursor: pointer;
  }
  .Layer .btns{
    width:340px;
    margin-top: 60px;
    position: relative;
    left:50%;
    transform: translateX(-50%);
  }
  .groupLayer .selectContain select{
    width:375px;
    height:42px;
    font-size: 16px;
    color:#393d40;
    padding-left: 16px;
    padding-right:30px;
    margin-bottom: 30px;
    background-image: url(../../../../../../iFengChao-UI/lib/img/icon-down.png);
    background-repeat: no-repeat;
    background-position: 350px center;
  }
  .groupLayer .remind{
    font-size: 14px;
  }
  .groupLayer .main{
    width:790px;
    margin-top:20px;
  }
  .groupLayer .main .leftPart{
    width:375px;
    margin-right: 40px;
    height:400px;
    padding:30px 20px;
    border:1px solid #d3d3d3;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 14px;
    color:#393d40;
  }
  .groupLayer .main .leftPart .title{
    margin-top:10px;
  }
  .groupLayer .main .leftPart .title .fl{
    width:20px;
    height:20px;
    margin-right:8px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .groupLayer .main .leftPart .title .addIcon{
    background-image: url(../../../../../../iFengChao-UI/lib/img/jia.png);
  }
  .groupLayer .main .leftPart .title .reduceIcon{
    background-image: url(../../../../../../iFengChao-UI/lib/img/jian.png);
  }
  .groupLayer .main .leftPart .first{
    margin-left:28px;
    margin-top:20px;
  }
  .groupLayer .main .leftPart .first .second{
    margin-left:28px;
    margin-top:20px;
  }
  .groupLayer .main .leftPart .first .second .three{
    margin-left:28px;
    margin-top:20px;
  }
  .groupLayer .main .leftPart .first .second .three .four{
    margin-left:28px;
    margin-top:20px;
  }
  .groupLayer .main .leftPart .first .second .three .last{
    margin-top:20px;
  }
  .groupLayer .main .rightPart{
    width:375px;
    height:400px;
    padding:10px 20px;
    font-size: 14px;
    border:1px solid #d3d3d3;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .groupLayer .main .rightPart .clear{
    width:100%;
  }
  .groupLayer .main .rightPart .clear .clearBtn{
    display: inline-block;
    font-size: 18px;
    color:#ff7070;
  }
  .groupLayer .main .rightPart .clear .fl{
    margin-left:10px;
  }
  .groupLayer .main .rightPart .textTitle{
    font-size: 16px;
    margin-top:20px;
  }
  .groupLayer .main .rightPart .textTitle:before {
    height: 18px;
    margin-top: -8px;
  }
  .groupLayer .main .bottomPart{
    margin-top: 30px;
    width:790px;
    height:130px;
    padding:20px 20px 0px 20px;
    border:1px solid #d3d3d3;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .groupLayer .main .bottomPart .chosedGather{
    margin-bottom: 20px;
  }
  .groupLayer .main .bottomPart .chosedGather .fl{
    width:710px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .groupLayer .main .bottomPart .chosedGather .closeBtn{
    cursor: pointer;
    width:20px;
    height:20px;
    background-image: url(./lib/img/close.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px 10px;
  }
</style>